<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>会员注册</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <script src="js/rem.js"></script> 
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="css/base.css"/>
    <link rel="stylesheet" type="text/css" href="css/page.css"/>
    <link rel="stylesheet" type="text/css" href="css/all.css"/>
    <link rel="stylesheet" type="text/css" href="css/mui.min.css"/>
    <link rel="stylesheet" type="text/css" href="css/loaders.min.css"/>
    <link rel="stylesheet" type="text/css" href="css/loading.css"/>
    <link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<script type="text/javascript">
	$(window).load(function(){
		$(".loading").addClass("loader-chanage")
		$(".loading").fadeOut(300)
	})
</script>
<script type="text/javascript">
			var regUrl= baseUrl+ "/zuul-user/users/regist";
			$(function(){ // 页面就绪事件
				// 为提交按钮添加点击事件
				$("#btnSubmit").click(function(){
					
					// 获取表单数据
					var username=$("#username").val();
					var pwd=$("#pwd").val();
					var phone=$("#phone").val();
					var idcard=$("#idcard").val();
					
					// 前台表单验证
					var flag=true;
					// 非空验证
					flag=checkEmpty("username","用户名不能为空")&&flag;
					flag=checkEmpty("pwd","密码不能为空")&&flag;
					flag=checkEmpty("rePwd","确认密码不能为空")&&flag;
		
					// 格式验证
					// 用户名：长度不低于6位
					// 密码/确认密码：长度不低于8位，数字字母大小写组合
		 
					// 判断页面中的input是否都是验证成功的状态
					var divArr=$("div.has-success");
					// if(divArr.length!=3){ // 存在异常项
					// alert('222');
					// 	return;
					// }
					
		
					// 逻辑验证
					// 两次密码一致
					flag=checkRePwd("pwd","rePwd","两次密码应该一致")&&flag;
		
					// 用户名不存在 TODO
		
		
					// 有验证异常则不提交表单
					if(flag==false){
						return;
					}
					// 提交表单
					// 请求参数属性名:变量名
					// 请求参数属性名要和后台实体类的属性名一致
					var params={
						username:username,
						password:pwd,
						phone:phone,
						idcard:idcard
					}
					// 发送AJAX请求
					$.post(regUrl,params,function(result){
						
						// 处理响应数据
						if(result.state==1000){ // 正常响应
							alert("注册成功，点击跳转登录页面");
							// 跳转登录页面
							location.replace("login.html");
						}else{ // 异常响应
							alert(result.msg);
						}
					});
				});
		
				$("#username").bind("input",function(){
					checkLength("username",6,12);
				});
		
				// 为用户名输入框添加失去焦点事件
				$("#username").blur(function(){
					if(!checkEmpty("username","用户名不能为空")) {
						return;
					}
					if(!checkLength("username",6,12)) {
						return;
					}
					// 异步验证用户名是否存在
					var url=baseUrl+ "/zuul-user/users/checkUsername";
					var params={
						username:$("#username").val()
					};
					$.get(url,params,function(result){
						if(result.state==1000 && result.msg=="false"){ // 不存在
							$("#username").parents(".form-group").removeClass("has-error").addClass("has-success");
							// 找到input相邻的span，在其中添加错误提示信息
							// $("#username").next("span").text("该用户可以使用");
							document.getElementById("msgges").innerText = "该用户可以使用";
							
						}else if(result.state==1000 && result.msg=="true"){ // 已存在
							$("#username").parents(".form-group").addClass("has-error");
							// 找到input相邻的span，在其中添加错误提示信息
							// $("#username").next("span").text("该用户名已存在");
							document.getElementById("msgges").innerText = "该用户名已存在";
						}else{
							$("#username").parents(".form-group").addClass("has-error");
							// 找到input相邻的span，在其中添加错误提示信息
							$("#username").next("span").text(result.msg);
						}
					});
				});
		 
				// 为密码输入框添加失去焦点事件
				$("#pwd").blur(function(){
					checkEmpty("pwd","密码不能为空");
				});
		
				// 为用户名输入框添加失去焦点事件
				$("#rePwd").blur(function(){
					var notEmpty=checkEmpty("rePwd","确认密码不能为空");
					if(notEmpty){
						checkRePwd("pwd","rePwd","两次密码不一致");
					}
				});
		
			});
		
			function checkLength(name,minLength,maxLength){
				if($("#"+name).val().length<minLength){ // 小于长度
					$("#"+name).parents(".form-group").addClass("has-error").removeClass("has-success");
					// 找到input相邻的span，在其中添加错误提示信息
					$("#"+name).next("span").text("长度不能小于"+minLength);
					return false;
				}else if($("#"+name).val().length>maxLength){
					$("#"+name).parents(".form-group").addClass("has-error").removeClass("has-success");
					// 找到input相邻的span，在其中添加错误提示信息
					$("#"+name).next("span").text("长度不能大于"+maxLength);
					return false;
				}else{ // 长度合适
					$("#"+name).parents(".form-group").removeClass("has-error").addClass("has-success");
					// 找到input相邻的span，在其中添加错误提示信息
					$("#"+name).next("span").text("");
					return true;
				}
			}
		
			function checkEmpty(name,msg){
				if($("#"+name).val()==""){ // 为空
					$("#"+name).parents(".form-group").addClass("has-error").removeClass("has-success");
					// 找到input相邻的span，在其中添加错误提示信息
					$("#"+name).next("span").text(msg);
					return false;
				}else{ // 不为空
					$("#"+name).parents(".form-group").removeClass("has-error").addClass("has-success");
					// 找到input相邻的span，在其中添加错误提示信息
					$("#"+name).next("span").text("");
					return true;
				}
			}
		
			function checkRePwd(name,name2,msg){
				if($("#"+name).val()==""){ // 为空则不进行一致验证
					return false;
				}
		
				if($("#"+name).val()!=$("#"+name2).val()){ // 两次密码不一致
					$("#"+name2).parents(".form-group").addClass("has-error").removeClass("has-success");
					// 找到input相邻的span，在其中添加错误提示信息
					$("#"+name2).next("span").text(msg);
					return false;
				}else{ // 不为空
					$("#"+name2).parents(".form-group").removeClass("has-error").addClass("has-success");
					// 找到input相邻的span，在其中添加错误提示信息
					$("#"+name2).next("span").text("");
					return true;
				}
			}
		
		</script>
</head>
<!--loading页开始-->
<div class="loading">
	<div class="loader">
        <div class="loader-inner pacman">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
	</div>
</div>
<!--loading页结束-->
	<body>
		<form>
		<div class="login clearfloat box-s">
			<h3>会员注册</h3>
			<div class="list clearfloat">
				<span id='msg'></span>
				<ul>
					<li class="ra3">
						<p class="fl clearfloat">
							<span class="opa5"></span>
							<i class="iconfont icon-yonghuming"></i>
						</p>
						<div class="nr clearfloat fl">
							<span class="opa3" id=''></span>
							<input type="text" name="username" id="username" value="" placeholder="用户姓名" />
							
						</div>
					</li>
					<li class="ra3">
						<p class="fl clearfloat">
							<span class="opa5"></span>
							<i class="iconfont icon-mima"></i>
						</p>
						<div class="nr clearfloat fl">
							<span class="opa3"></span>
							<input type="password" name="pwd" id="pwd" value="" placeholder="登录密码" />
						</div>
					</li>
					<li class="ra3">
						<p class="fl clearfloat">
							<span class="opa5"></span>
							<i class="iconfont icon-mima"></i>
						</p>
						<div class="nr clearfloat fl">
							<span class="opa3"></span>
							<input type="password" name="rePwd" id="rePwd" value="" placeholder="确认密码" />
						</div>
					</li>
					<li class="ra3">
						<p class="fl clearfloat">
							<span class="opa5"></span>
							<i class="iconfont icon-shouji"></i>
						</p>
						<div class="nr clearfloat fl">
							<span class="opa3"></span>
							<input type="text" name="phone" id="phone" value="" placeholder="联系电话" />
						</div>
					</li>
					<li class="ra3">
						<p class="fl clearfloat">
							<span class="opa5"></span>
							<i class="iconfont icon-shenfenzheng"></i>
						</p>
						<div class="nr clearfloat fl">
							<span class="opa3"></span>
							<input type="text" name="idcard" id="idcard" value="" placeholder="身份证号" />
						</div>
					</li>

					<span id='msgges' class="opa3" style="color: yellow;"></span>
				</ul>
			</div>			
			<div class="login-btn">
			

				<a href="javascript:void(0)" id="btnSubmit">
					注册
				</a>
				
			</div>
			<div class="mima mimaone clearfloat">
				<ul>
					<li class="fr">
						<a href="login.html">立即登录</a>
					</li>
				</ul>
			</div>
		</div>
		</form>
		
	</body>
</html>
